<template>
  <div class="menu-wrapper">
    <office-dialog ref="officeDialog" @confirm="dialogConfirm" />
    <el-form ref="sysEmployeeform" :model="sysEmployeeform" :rules="rules" label-width="80px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;" class="el-headerTitle">修改信息</span>
      </div>
      <el-col :span="14">
        <el-form-item label="登录账号" prop="username">
          <el-col>

            <span>{{sysUser.username}}</span>
          </el-col>
        </el-form-item>
        <el-form-item label="员工姓名" prop="name">
          <el-col >
            <el-input v-model="sysEmployeeform.name"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-col >
            <el-input v-model="sysEmployeeform.phone"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="员工号">
          <el-input v-model="sysEmployeeform.empNo"></el-input>
        </el-form-item>
        <el-form-item label="所在部门">
          <el-input v-model="topName" suffix-icon="el-icon-search" @focus="dialogShow" />
        </el-form-item>
        <el-form-item label="所在岗位">
          <el-select v-model="syspost_list" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="sysEmployeeform.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  :loading="loading" @click="updateSysEmployee('sysEmployeeform')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<style scoped>
  .menu-wrapper {
    margin: 15px;
  }
  .el-headerTitle{
    font-size: 20px;
    color: #409EFF;
  }
</style>
<script>
  import {save,del,find,update} from '@/api/sysEmployee'
  import { EventBus } from '@/api/eventBus'
  import {list} from '@/api/sysPost'
  import OfficeDialog from '@/components/OfficeDialog'
  export default {
    name:'sysEmployee-edit',
    data() {
      return {
        sysUser:{},
        sysEmployeeform: {
          id:'',
          empNo: '',
          mchId: '',
          name: '',
          officeId: '',
          remark: '',
          phone:''
        },
        loading: false,
        rules: {
          name: [
            {required: true, message: '请输入员工名称', trigger: 'blur'},
            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'}
          ],
        },
        options: [],
        syspost_list: [],
        topName:'',
      }
    },
    filters: {},
    components: {OfficeDialog},
    created() {
      this.findSysEmployee()
      this.openList()
    },
   watch:{ // 路由地址不变的情况下,如果id变化则重新获取数据
     $route (newVal, oldVal) {
         console.log(newVal);
       if (newVal.name=='sysEmployee-edit' && newVal.query.form.id!=this.sysEmployeeform.id) {
         this.findSysEmployee()
       }
     }
   },
    methods: {
      dialogShow() {
        console.log('点击了')
        this.$refs.officeDialog.show()
      },
      dialogConfirm(val) {
        console.log(val)
        this.topName = val.name
        this.sysEmployeeform.officeId = val.id
      },
      findSysEmployee() {
        this.syspost_list=[]
        this.sysEmployeeform.id = this.$route.query.form.id
        var _this = this
        find(_this.sysEmployeeform.id).then(response=>{

          this.sysUser=response.data.sysUser
          this.sysEmployeeform.empNo = response.data.sysEmployee.empNo
          this.sysEmployeeform.mchId = response.data.sysEmployee.mchId
          this.sysEmployeeform.name = response.data.sysEmployee.name
          this.sysEmployeeform.officeId = response.data.sysEmployee.officeId
          this.sysEmployeeform.remark = response.data.sysEmployee.remark
          this.sysEmployeeform.phone = response.data.sysEmployee.phone
          this.topName = response.data.sysEmployee.officeName
          response.data.postList.forEach(function (item) {
              _this.syspost_list.push(item.id)
          })
        }).catch(error => {
          _this.loading = false
          console.log('error!!')
        });
      },
      openList: function () {
        let _this = this;
        let params = new URLSearchParams();
        list(params).then(response => {
          console.log(response)
          _this.options = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      updateSysEmployee: function (sysEmployeeform) {
        var _this = this
        this.$refs[sysEmployeeform].validate((valid) => {
          if (valid) { // 校验表单
            _this.loading = true
            let params = new URLSearchParams();
            _this.syspost_list.forEach(function (item) {
              params.append('postIds', item);
            })
            update(_this.sysEmployeeform,params).then(response => {
              _this.loading = false;
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
              EventBus.$emit('sysEmployee-edit', response.data)
              _this.$store.dispatch('tagsView/delView', _this.$route).then(({ visitedViews }) => {
                _this.$router.push({
                  path: '/sysEmployee/list'
                })
              })// 关闭当前tab回到列表
            }).catch(error => {
              _this.loading = false;
              console.log('error!!')
            });
          } else {
            console.log('error submit!!');
            return false
          }
        });
      }
    },
  }
</script>
